<script lang="ts" setup>
import useLotNewsLive from "@/components/NewsLive/composables/useLotNewsLive";
import router from "@/router";
import useLotNews, { useLotNewsRefs } from "../hooks/useLotNews";
defineOptions({
  name: "NewsIt4"
});
defineProps({
  item: {
    type: Array as () => any[],
    default: () => []
  }
});
const { resetNewsLive, setActive } = useLotNewsLive();
const { onLoad } = useLotNews();
const { exec } = useLotNewsRefs();
onMounted(() => {
  if (!exec.value) {
    onLoad();
  }
});
function goToDetail(id: string) {
  setActive(0);
  resetNewsLive();
  router.push(`/news/detail/${id}`);
}
</script>
<template>
  <div
    class="w-362 mx-auto h-auto pt-10 bg-[#fff] shadow-[0px_0px_6px_0px_rgba(95,137,165,0.22)] rounded-18 font-[Inter,Inter] mb-20"
  >
    <div
      @click="goToDetail(item[0].id)"
      class="w-342 h-159 mx-auto rounded-14 mb-17 relative"
    >
      <div class="rounded-14 absolute top-0 left-0 w-full h-full">
        <img class="rounded-14 w-full h-full" :src="item[0].img_url" alt="" />
      </div>
      <div
        class="absolute bottom-0 left-0 w-full h-73 bg-[linear-gradient(180deg,rgba(0,0,0,0)_0%,#00172F_100%)] rounded-[0_0_14px_14px] flex flex-col justify-end items-stretch"
      >
        <p
          class="font-500 text-11 color-[#fff] h-44 lh-44 text-center rounded-[0_0_14px_14px] text-ellipsis-1"
        >
          {{ item[0].title }}
        </p>
      </div>

      <div
        v-if="item[0].is_video === 1"
        class="absolute top-50% left-50% translate-[-50%]"
      >
        <svg-icon class="text-50" name="play" />
      </div>
    </div>
    <div
      v-for="(it, idx) in item.slice(1)"
      :key="idx"
      class="w-342 mx-auto h-107 b-b-0.5 b-b-solid b-b-#E4E4E4 mb-15 last-of-type:b-b-none"
      @click="goToDetail(it.id)"
    >
      <div class="w-full mx-auto h-88 flex justify-between items-center">
        <div
          class="w-212 h-full pt-6 pl-6 flex flex-col justify-between items-stretch"
        >
          <div
            class="w-188 h-auto font-500 text-12 color-#0F0F0F text-left mb-4 text-ellipsis-3"
          >
            {{ it.title }}
          </div>
          <div
            class="w-188 h-10 flex justify-between items-center font-400 text-9 color-#787676"
          >
            <span>{{ it.publisher }}</span>
            <span>{{ it.publish_time }}</span>
          </div>
        </div>
        <div class="w-130 h-full relative">
          <div class="w-full h-full rounded-8 absolute top-0 left-0">
            <img class="w-full h-full rounded-8" :src="it.img_url" alt="" />
          </div>
          <div
            v-if="it.is_video === 1"
            class="absolute top-50% left-50% translate-[-50%]"
          >
            <svg-icon class="text-25" name="play" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
